<script setup>
// 保持原有Props定义
const props = defineProps({
  type: {
    type: String,
    default: 'checkbox'
  },
  align: {
    type: String,
    default: 'left'
  },
  labelVisible: {
    type: Boolean,
    default: true
  },
  required: {
    type: Boolean,
    default: false
  },
  label: {
    type: String,
    default: ''
  },
  labelWidth: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
})

// 双向绑定值
const value = defineModel()
</script>

<template>
  <!-- 调整容器样式，移除不必要的拉伸 -->
  <div :class="['flex', align === 'top' ? 'flex-col items-start' : 'items-center']">
    <div v-if="labelVisible" class="text-sm flex items-center mr-1 font-medium">
      <template v-if="$slots.label">
        <span v-if="required" class="text-red-500 mr-0.5">*</span>
        <slot name="label"></slot>
      </template>
      <div v-else :style="{ width: labelWidth, textAlign: align === 'top' ? 'left' : align }">
        <span v-if="required" class="text-red-500 mr-0.5">*</span>
        <span> {{ label }}</span>
      </div>
    </div>

    <!-- 核心修改：移除grow类和不必要的内边距，添加靠左对齐 -->
    <input type="checkbox" :name="label" v-model="value" :class="[
      'h-[15px] w-[15px] rounded-[2px] border border-gray-300',
      align !== 'top' ? 'ml-2' : 'mt-1.5 mt-0.5',
      'bg-white', // 恢复白色背景，与原生复选框一致
      disabled ? 'opacity-50' : ''
    ]" :disabled="disabled" :readonly="readonly" />
    <div class="text-sm ml-1 text-gray-700">
      <template v-if="$slots.text">
        <slot name="text">{{ text }}</slot>
      </template>
    </div>
  </div>
</template>

<style scoped>
/* 移除占位符样式（复选框不需要） */
input::placeholder {
  display: none;
}

input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
}

input[disabled] {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

/* 修复复选框选中样式 */
input[type="checkbox"]:checked {
  background-color: #165dff;
  border-color: #165dff;
  accent-color: #165dff;
}
</style>